<template>
  <div class="question-bank-detail">
    <!-- 题库基本信息 -->
    <div class="bank-info">
      <el-image 
        :src="bankInfo.picture" 
        fit="fill"
        style="width: 300px; height: 200px; border-radius: 8px;"
      />
      <div class="bank-content">
        <h2>{{ bankInfo.name || '题库名称' }}</h2>
        <p class="description">{{ bankInfo.description || '题库描述' }}</p>
        <el-button type="primary" size="large" @click="startPractice">
          开始刷题
        </el-button>
      </div>
    </div>

    <!-- 题目列表 -->
    <div class="question-list">
      <h3>题目列表 (共{{ questions.length }}题)</h3>
      <el-table :data="questions" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="题目" min-width="300" />
        <el-table-column prop="difficulty" label="难度" width="120">
          <template #default="{row}">
            <el-tag :type="getDifficultyType(row.difficulty)">
              简单
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{row}">
            <el-button link type="primary" @click="viewQuestion(row.id)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'

const route = useRoute()
const bankInfo = ref({})
const questions = ref([])
const loading = ref(false)

// 获取题库详情和题目列表
const fetchBankData = async () => {
  try {
    loading.value = true
    const response = await axios.get('http://localhost:8121/api/questionBank/get/vo', {
      params: {
        id: route.params.id,
        needQueryQuestionList: true
      },
      withCredentials: true
    })
    
    if (response.data.code === 0) {
      bankInfo.value = response.data.data
      questions.value = response.data.data.questionPage?.records || []
    } else {
      console.error('获取数据失败:', response.data.message)
    }
  } catch (error) {
    console.error('请求失败:', error)
  } finally {
    loading.value = false
  }
}

// 开始刷题
const startPractice = () => {
  console.log('开始刷题', bankInfo.value.id)
}

// 查看题目
const viewQuestion = (id) => {
  console.log('查看题目', id)
}

// 难度标签类型
const getDifficultyType = (difficulty) => {
  const map = {
    '简单': 'success',
    '中等': 'warning',
    '困难': 'danger'
  }
  return map[difficulty] || 'info'
}

onMounted(() => {
  fetchBankData()
})
</script>

<style scoped>
.question-bank-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.bank-info {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  align-items: flex-start;
}

.bank-content {
  flex: 1;
}

.bank-content h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.description {
  margin-bottom: 20px;
  color: #666;
  line-height: 1.6;
}

.question-list {
  margin-top: 30px;
}

.question-list h3 {
  margin-bottom: 15px;
}
</style>